 var MImage = Backbone.Model.extend({
     listImage: function(pagenum) {
         $.ajax({
             url: "http://survey.wrud.net/api/image/index/" + pagenum,
             type: "GET",
             dataType: "json",
             data: {},
             success: function(res) {
                 AppImage.render(res.data);
             }
         });
     } //CURD

 });
 var VImage = Backbone.View.extend({
     events: {

     },
     initialize: function(argument) {
         this.setElement($('#Waterfall'));
         $container = $('#Waterfall');
         pagenum = 1;

     },
     render: function(data) {
         console.log(data);
         html = "";
         for (var i = 0, len = data.length; i < len; i++) {
             data[i];
             data[i].height = parseInt(data[i].height) * 196 / parseInt(data[i].width);
             data[i].width = 196;
             data[i].url = data[i].source;
             html += template.render("pinTpl", data[i]);
         };
         $("#Waterfall").append(html);
         if (pagenum == 1) {
             $("#Waterfall").masonry({
                 singleMode: true,
                 columnWidth: 222,
                 itemSelector: '.Pin',
                 isFitWidth: true,
                 gutterWidth: 15
             });
         } else {
             $("#Waterfall").masonry({
                 singleMode: true,
                 columnWidth: 222,
                 itemSelector: '.Pin',
                 isFitWidth: true,
                 gutterWidth: 15,
                 isAnimated: true,
                 animationOptions: {
                     queue: false,
                     duration: 500
                 }
             });
         }
     },
     renderElement: function(newElements) {
         $container = $("#Waterfall");
         var $newElems = $(newElements);
         $container.masonry('appended', $newElems, true);
         //取里面的img 加载前隐藏
         var $img = $(newElements).find('.showGirl').css({
             opacity: 0
         });
         var $default = $(newElements).find('.Pin_default');
         //在添加到masonry布局之前保证图片载入
         $newElems.imagesLoaded(function() {
             //现在可以显示所有的元素了
             $img.animate({
                 opacity: 1
             });
             $default.hide().remove(); 
         });
         pagenum++;
     },
     refresh: function(pagenum) {
         this.model.listImage(pagenum);
     }
 });

 var AppImage = new VImage({
     model: new MImage()
 });

 AppImage.refresh(1);

 $("#Waterfall").infinitescroll({
         loading: {
             finished: undefined,
             finishedMsg: "你好坏，都被你看光了!",
             //img: '/static/images/waterLoading.gif',
             msg: null,
             msgText: "",
             selector: null,
             speed: 'fast',
             start: undefined
         },
         dataType: 'json',
         navSelector: '#page_nav',
         nextSelector: '#page_nav a',
         debug: false,
         maxPage: 17,
         extraScrollPx: 240,
         errorCallback: function() {},
         template: function(res) {
             data = res.data;
             html = "";
             for (var i = 0, len = data.length; i < len; i++) {
                 data[i];
                 data[i].height = parseInt(data[i].height) * 196 / parseInt(data[i].width);
                 data[i].width = 196;
                 data[i].url = data[i].source;
                 html += template.render("pinTpl", data[i]);
             };
             return html;
         }
     },
     function(newElements) {
         var $newElems = $(newElements);
         //取里面的img 加载前隐藏
         var $img = $(newElements).find('.showGirl').css({
             opacity: 0
         });
         var $default = $(newElements).find('.Pin_default');
         $container.masonry('appended', $newElems, true, function() {});
         //在添加到masonry布局之前保证图片载入
                
         $newElems.imagesLoaded(function() {
             //现在可以显示所有的元素了
             $img.animate({
                 opacity: 1
             });
             $default.hide().remove();
         });
         AppImage.curpage++;
     }
 );